import React from "react";
import { Card, Space} from 'antd';
import _ from 'lodash'
const { Meta } = Card;
const CustomCard = React.memo((props)=>{
    return (
        <Card
          title={props.item.title}
          extra={<a href={`${props.item.url}`}>More</a>}
          style={{ width: 300 }}
          cover={
            <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
          }
        >
          <Meta title="Europe Street beat" description="www.instagram.com" />
        </Card>
      );
})
const My:React.FC = () =>{
    const list = [
        {url:'/home',content:'这个是首页',title:'首页'},
        {url:'about',content:'这个是关于页面',title:'关于'},
        {url:'/article',content:'这个是文章页面',title:'文章'},
        {url:'/my',content:'这是我的页面',title:'我的'},
    ]
    return(
        <Space direction="horizontal" size={16}>
           {
            _.map(list,(item,index)=> (<CustomCard key={index} item={item} />))
           }
            
        </Space>
    )
}

export default My;